<template>
  <view class="pages">
    <!-- 头部 start -->
	<fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
	  <block slot="content">分佣商品列表</block>
	</fu-custom>
  <!--  <view class="cu-custom bg-white" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
      <view class="cu-bar bg-white fixed" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
        <view class="action" @tap="back"><text class="cuIcon-back"></text></view>
        <view class="search-form round">
          <text class="cuIcon-search"></text>
          <input confirm-type="search" type="text" v-model="keywords" :adjust-position="false" :hold-keyboard="false"
            :placeholder="placeholder" @confirm="searchConfirm" />
          <text v-if="keywords.length != 0" class="cuIcon-close text-gray padding-right-xs" @tap="handleClear"></text>
        </view>
      </view>
    </view> -->
    <!-- 头部 end -->
    <block>
      <!--商品列表 start-->
      <view :class="[model == 'inline' ? 'padding-lr-sm' : 'padding-lr-xs']">
        <view v-if="model == 'inline'">
          <block v-for="(item, index) in listData" :key="item.id">
            <fu-goods-inline2 :item="item" :index="index" @createAnimate="createAnimate" :isShow="true"></fu-goods-inline2>
          </block>
        </view>
        <view v-else class="padding-top">
          <fu-waterfall v-model="listData">
            <template v-slot:left="{leftList}">
              <block v-for="(item,index) in leftList" :key="item.id">
                <fu-goods-block :info="item"></fu-goods-block>
              </block>
            </template>
            <template v-slot:right="{rightList}">
              <block v-for="(item,index) in rightList" :key="item.id">
                <fu-goods-block :info="item"></fu-goods-block>
              </block>
            </template>
          </fu-waterfall>
        </view>
      </view>
      <!--商品列表 end-->
      <view>
        <block v-for="(item,index) in animates" :key="item.id">
          <view class="animate"
            :style="{ visibility: item.show ? 'visible' : 'hidden', left: item.left + 'px', top: item.top + 'px', transform: 'scale(' + item.scale + ')' }">
            <image :src="animateImg" mode="aspectFill"></image>
          </view>
        </block>
      </view>
    </block>
    <!-- 分页组件 start -->
    <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
      :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
    <!-- 分页组件 end -->
    <!-- 断网检测组件 -->
    <fu-notwork></fu-notwork>
  </view>
</template>
<script>
  // 楼层效果混入js
  import pagingList from '@/common/mixin/paging_list.js' //引入混合开发
  import fuGoodsInline2 from '@/components/fu-goods-inline/fu-goods-inline2.vue'
  export default {
    components: {
		fuGoodsInline2
    },
    mixins: [pagingList],
    data() {
      return {
        minixPagingListsApi: global.apiUrls.getGoodsGetGoodsList22, //明细请求地址
        pageingListApiMethod: "get", //请求方法
        allowOnloadGetList: false, // 是否允许页面onload生命周期进入后立马执行getlist
        animates: [],
        animateImg: '',
        cartPoint: null, // 购物车图标位置
        keywords: '', // 搜索的文本
        placeholder: '搜点什么', // 默认文本
        model: 'inline', // 布局样式
        cid: '', // 分类id(点击分类跳转过来必传)
        cids: '', // 识图传参 类别集合
        sort: '1', // 条件
        order: 'asc', // 排序 asc: 正序 desc: 倒序
        advancedSearch: null ,// 高级搜索对象
        goods_type: '', // 商品搜索类型 0搜索全部商品 1全部类型（推荐，精品，新品，热卖） 2推荐 3精品 4新品 5热卖
      };
    },

    onLoad(options) {
      /***
       * @keyWords 关键词
       * @cid 分类id
       **/
      const {
        keyWords = '', cid = '', goods_type = '', cids = ''
      } = options;
      if (keyWords) {
        this.keywords = keyWords;
      }
      if (cid != '') {
        this.cid = cid;
      }
      if (cids != '') {
        this.cids = cids;
      }
      if (goods_type != '') {
        this.goods_type = goods_type;
      }
      this.pagingListToggle(); // 搜索方法
    },
    methods: {
      
      createAnimate(e) {
        if (this.animates.length >= 5) this.animates = [];
        uni.createSelectorQuery().in(this)
          .select('#box_pos_' + e.index)
          .boundingClientRect(res => {
            console.log("得到布局位置信息", res, e.item);
            this.animateImg = e.item.thumb;
            let len = this.animates.length;
            this.animates = this.animates.concat({
              id: +new Date(),
              top: res.top + 20,
              left: res.left - 20,
              scale: 1,
              show: true
            });
            setTimeout(() => {
              let list = this.animates;
              list[len].top = this.cartPoint.top;
              list[len].left = this.cartPoint.left;
              list[len].scale = 0.5;
              this.animates = list;
            }, 30)
            setTimeout(() => {
              this.$set(this.animates[len], 'show', false);
            }, 550)
          }).exec();
      },
      
      /**
       * @description 切换布局
       * @param {Object} e inline和block布局切换
       */
      changeLayout(e) {
        this.model = e;
      },
      /**
       * @description 切换搜索条件
       * @param {Object} type 条件
       * @param {Object} order 排序 asc: 正序 desc: 倒序
       * @param {Object} advancedSearch 高级搜索对象
       */
      changeFilter(type, order, advancedSearch) {
        this.sort = ++type;
        this.order = order;
        // 判断高级搜索存在
        if (advancedSearch) {
          this.advancedSearch = advancedSearch;
        }
        this.pagingListToggle();
        this.$nextTick(() => {
          // 切换条件回到底部
          uni.pageScrollTo({
            scrollTop: 0,
            duration: 0
          });
        });
      },
      /**
       * @description 切换搜索条件
       * @param {Object} e input框事件源
       */
      searchConfirm(e) {
        if (e && e.detail.value.trim() == '') {
          return this.$message.info('请输入要搜索的内容');
        }
        uni.hideKeyboard();
        if (this.$refs.childMethod) {
          // this.$refs.childMethod.resetPop();
          this.advancedSearch = {
            brand_id: '',
            sku_id: '',
            service_lable_id: '',
            min_price: '',
            max_price: ''
          };
        }
        this.pagingListToggle();
      },
      /**
       * @description  设置要请求的参数
       * 在混入开发时，调用该方法和混入的请求参数合并在一起
       */
      pagingListPostData() {
        let data = {
          sort: this.sort,
          order: this.order
        }
        //判断是否有高级搜索
        if (this.advancedSearch) {
          data.brand_id = this.advancedSearch.brand_id;
          data.sku_id = this.advancedSearch.sku_id;
          data.service_lable_id = this.advancedSearch.service_lable_id;
          data.min_price = this.advancedSearch.min_price;
          data.max_price = this.advancedSearch.max_price;
        }
        // 判断关键字或者placeholder内容
        if (this.placeholder.trim() || this.keywords.trim()) {
          data.keyword = this.keywords;
          this.addHistory(this.keywords.trim());
        }
        if (this.cid) {
          data.cid = this.cid;
        }
        if (this.cids) {
          data.cids = this.cids;
        }
        if (this.goods_type) {
          data.goods_type = this.goods_type;
        }
        return data
      },
      // 清除关键字
      handleClear() {
        this.keywords = '';
        if (this.$refs.childMethod) {
          // this.$refs.childMethod.resetPop();
          this.advancedSearch = {
            brand_id: '',
            sku_id: '',
            service_lable_id: '',
            min_price: '',
            max_price: ''
          };
        }
        this.pagingListToggle();
        uni.hideKeyboard();
      },
      // 返回
      back() {
        uni.navigateBack();
      },
      /**
       * @description 增加一条搜索历史记录
       * @param {Object} value 关键词
       */
      addHistory(value) {
        if (!value) return;
        let _history = uni.getStorageSync('SEARCHHISTORY');
        if (!_history) {
          _history = [];
        }
        _history.unshift(value);
        let history = [...new Set(_history)];
        uni.setStorageSync('SEARCHHISTORY', history);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .page {
    min-height: 100%;
  }
  .animate {
    position: fixed;
    border-radius: 50%;
    z-index: 995;
    transform-origin: 50% 50%;
    transition: transform linear 0.5s, left linear 0.5s, top cubic-bezier(0.3, -0.2, 1, 0) 0.5s !important;

    image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }
  }
</style>
